<template>
  <Dialog v-model="dialogVisible" title="公告详情" width="800px">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="公告标题" :span="2">
        {{ announcementData.title || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="公告类型">
        <el-tag :type="getTypeColor(announcementData.type)">
          {{ getTypeName(announcementData.type) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="发布状态">
        <el-tag :type="announcementData.status === 1 ? 'success' : 'info'">
          {{ announcementData.status === 1 ? '已发布' : '草稿' }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="发布时间">
        {{ announcementData.publishTime || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">
        {{ announcementData.createTime || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="公告内容" :span="2">
        <div style="white-space: pre-wrap; max-height: 300px; overflow-y: auto;">
          {{ announcementData.content || '-' }}
        </div>
      </el-descriptions-item>
    </el-descriptions>
    
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const dialogVisible = ref(false)
const announcementData = ref({})

const getTypeName = (type: number) => {
  const typeMap = { 1: '系统公告', 2: '评价公告', 3: '紧急公告' }
  return typeMap[type] || '-'
}

const getTypeColor = (type: number) => {
  const colorMap = { 1: 'info', 2: 'success', 3: 'danger' }
  return colorMap[type] || 'info'
}

const open = (data: any) => {
  dialogVisible.value = true
  announcementData.value = data
}

defineExpose({ open })
</script> 